<template>
  <div>
    <div class="contentTopTitle">
      <div class="fl">
        <div class="title">月跟踪-码号收入分项目标测算</div>
      </div>
    </div>
    <el-form inline :model="form" label-width="70px" size="mini" style="margin-top:10px">
      <el-form-item label="账期">
        <el-date-picker
          v-model="form.acctMonth"
          type="month"
          placeholder="请选择"
          value-format="yyyyMM"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="区域">
        <dx-cascader
          :area_id.sync="form.areaId"
          :area_name.sync="form.areaName"
          :area_lvl.sync="form.areaLvl"
          ref="cascader"
        />
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="form.status">环比</el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" @click="search"
          >查询</el-button
        >
        <el-button size="small" type="warning" @click="handle_export(1)"
          >导出</el-button
        >
        <el-button size="small" type="warning" @click="handle_export(2)"
          >二级导出</el-button
        >
        <el-button size="small" type="warning" @click="handle_export(3)"
          >三级导出</el-button
        >
      </el-form-item>
    </el-form>
    <div class="tableBox" style="margin-top: 10px">
      <el-table
        v-loading="tableLoading"
        :data="tableData"
        style="width: 100%"
        class="tableTh28"
        border
        stripe
        ref="table"
        :height="tableHeight+''"
        :span-method="spanMethod"
        :header-cell-class-name="headerClass"
        :cell-class-name="cellClassName"
      >
        <el-table-column v-for="(item,i) in columns" :key="item.label+i" :label="item.label" :prop="item.prop" :min-width="item.minWidth">
          <el-table-column
            v-for="child in item.children"
            :key="child.prop"
            :label="child.label"
            :prop="child.prop"
            :min-width="child.minWidth"
          ></el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api";
import { mergeSpan } from "@/utils/mixin";
import { downLoadExcelParams } from "@/utils/zipdownload.js"
export default {
  data() {
    return {
      form: {
        acctMonth: "",
        areaId: "",
        status: false,
      },
      tableLoading: false,
      tableData: [],
      columns: [],
      spanArr: [],
      tableHeight: window.innerHeight - 216,
    };
  },
  created() {
    this.form.acctMonth = this.moment().subtract(1, "months").format("YYYYMM");
    this.form.areaId = JSON.parse(getSessionStorage("accountInfo")).areaId;
    window.addEventListener("resize", this.resizeTable);
    this.getData();
  },
  beforeDestroy(){
    window.removeEventListener("resize", this.resizeTable);
  },
  methods: {
    //查询
    search() {
      this.getData();
    },
    getData() {
      this.tableLoading = true;
      let form = { ...this.form };
      form.status = form.status ? 1 : 0;
      $budgetAPI.selectRptReportDataMh(
        { token: getCookie("token"), ...form },
        (res) => {
          // this.alertError(res);
          if (res.code == 0) {
            const { data, key, head, head3, head4, head5, month } = res.content;
            this.columns = [];

            for(let i = 0; i <= 3; i++){
              this.columns.push(
                {label: head3[0], prop: key[i], minWidth: i === 3 ? "85" : undefined}
              );
            }
            key.splice(0, 4);

            for(let i = 0; i <= 1; i++){
              this.columns.push({label: head[i], prop: key[i]});
            }
            key.splice(0, 2);
            head.splice(0, 2);

            let _month = +month;
            this.columns.push({label: head4[0], children: []});
            for(let i = 0; i <= _month; i++){
              this.columns[6].children.push({label: head[i], prop: key[i]});
            }
            key.splice(0, _month + 1);
            head.splice(0, _month + 1);

            if(_month < 12){
              this.columns.push({label: head5[0], children: []});
              for(let i = 0; i < 12 - _month; i++){
                this.columns[7].children.push(
                  {label: head[i], prop: key[i], minWidth: _month == 11 ? "92" : undefined}
                );
              }
              key.splice(0, 12 - _month);
              head.splice(0, 12 - _month);
            }

            key.forEach((it, i) => {
              this.columns.push({
                label: head[i],
                prop: it
              })
            })
            this.tableData = data;
            this.spanArr = mergeSpan(this.tableData, ['class1', 'class2', 'class3', "verticalIndexName"]);
          };
          this.mergeRow();
          this.tableLoading = false;
        },
        (err) => {
          console.error(err);
          this.tableLoading = false;
        }
      );
    },
    handle_export(lvl){
      const form = { ...this.form };
      form.token = getCookie("token");
      form.status = form.status ? 1 : 0;
      if(lvl == 1){
        downLoadExcelParams(
          "/incomeTrack/exportRptReportDataMh", 
          form,
          form.acctMonth + "码号收入分项目标测算"
        );
        return;
      }
      if(lvl == 2){
        downLoadExcelParams(
          "/incomeTrack/exportTwoRptReportDataMh", 
          form,
          form.acctMonth + "码号收入分项目标测算-二级导出"
        );
        return;
      }
      if(lvl == 3){
        downLoadExcelParams(
          "/incomeTrack/exportThereRptReportDataMh", 
          form,
          form.acctMonth + "码号收入分项目标测算-三级导出"
        );
        return;
      }
    },
    spanMethod({ rowIndex, columnIndex }){
      if(columnIndex <= 3){
        return this.spanArr[rowIndex][columnIndex];
      }
    },
    headerClass({rowIndex, columnIndex}){
      if(rowIndex === 0){
        if (columnIndex === 0) {
          return 'header-row-colspan-4';
        }
        if (columnIndex >= 1 && columnIndex <= 3) {
          return 'row-display';
        }        
      }
    },
    cellClassName({rowIndex, columnIndex, row, column}){
      if(row.class2 === '政企专线'){
        if(columnIndex == 1) return "row-colspan-2";
        else if(columnIndex == 2) return 'row-display';
      }
    },
    async mergeRow(){
      await this.$nextTick();
      for(let dom of document.querySelectorAll(".header-row-colspan-4")){
        dom.setAttribute("colspan", "4");
      }
      for(let dom of document.querySelectorAll(".row-colspan-2")){
        dom.setAttribute("colspan", "2");
      }
    },
    resizeTable(){
      this.tableHeight = window.innerHeight - 216;
      this.$nextTick(() => { this.$refs.table.doLayout(); });
    },
  }
}
</script>
<style lang="scss" scoped>
  /deep/ .el-form-item__label {
		font-size: 13px;
		padding-right: 10px;
		line-height: 32px !important;
	}
  /deep/ .el-table {
    .el-table__row {
      td {
        padding: 0 !important;
      }
      .cell {
        padding: 2px 0 !important;
        font-size: 12px !important;
      }
    }
  }
  /deep/ .row-display {
    display: none;
  }
</style>